<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Konva.js 矩形图形-图形关联-弧度-mouseover</title>
  <script src="./konva.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #container {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div id="container"></div>

  <script>
    // 创建舞台
    var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
    })

    // 创建层
    var layer = new Konva.Layer()
    stage.add(layer)

    // 创建矩形1
    var rect1 = new Konva.Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 50,
      fill: 'blue',
      draggable: true
    })
    layer.add(rect1)

    // 创建矩形2
    var rect2 = new Konva.Rect({
      x: 400,
      y: 300,
      width: 100,
      height: 50,
      fill: 'green',
      draggable: true
    })
    layer.add(rect2)

    var circle = new Konva.Circle({
      x: 300,
      y: 300,
      radius: 60,
      fill: '#99c',
      stroke: 'black',
      strokeWidth: 2
    })
    layer.add(circle)

    // 创建带有弧度的箭头连接线
    var curvedArrow = new Konva.Arrow({
      points: [],
      pointerLength: 10,
      pointerWidth: 10,
      fill: 'red',
      stroke: 'red',
      strokeWidth: 2,
      tension: 0.5,
      lineCap: 'round',
      lineJoin: 'round',
      visible: false
    })
    layer.add(curvedArrow)

    // 用于存储点击的矩形
    var selectedRects = []

    // 更新箭头位置的函数
    function updateCurvedArrow () {
      if (selectedRects.length === 2) {
        var rect1 = selectedRects[0]
        var rect2 = selectedRects[1]
        curvedArrow.points([
          rect1.x() + rect1.width() / 2, rect1.y() + rect1.height() / 2,
          (rect1.x() + rect2.x()) / 2, rect1.y() + rect1.height() / 2,
          (rect1.x() + rect2.x()) / 2, rect2.y() + rect2.height() / 2,
          rect2.x() + rect2.width() / 2, rect2.y() + rect2.height() / 2
        ])
        curvedArrow.visible(true)
        layer.batchDraw()
      }
    }

    // 监听矩形的点击事件
    function onRectClick (rect) {
      if (selectedRects.length < 2) {
        selectedRects.push(rect)
        rect.stroke('yellow')  // 选中的矩形变为黄色
        rect.strokeWidth(2)
        layer.batchDraw()
      }

      if (selectedRects.length === 2) {
        updateCurvedArrow()
      }
    }

    rect1.on('click', function () { onRectClick(rect1) })
    rect2.on('click', function () { onRectClick(rect2) })

    // 监听矩形的拖动事件
    rect1.on('dragmove', function () {
      if (selectedRects.includes(rect1)) {
        updateCurvedArrow()
      }
    })

    rect2.on('dragmove', function () {
      if (selectedRects.includes(rect2)) {
        updateCurvedArrow()
      }
    })

    // 监听鼠标悬停事件
    function onMouseOver (shape) {
      shape.stroke('red')
      shape.strokeWidth(5)
      layer.batchDraw()
    }

    function onMouseOut (shape) {
      shape.stroke(shape === rect1 || shape === rect2 ? 'red' : 'black')
      shape.strokeWidth(shape === rect1 || shape === rect2 ? 0 : 3)
      layer.batchDraw()
    }

    rect1.on('mouseover', function () { onMouseOver(rect1) })
    rect1.on('mouseout', function () { onMouseOut(rect1) })

    rect2.on('mouseover', function () { onMouseOver(rect2) })
    rect2.on('mouseout', function () { onMouseOut(rect2) })

    circle.on('mouseover', function () { onMouseOver(circle) })
    circle.on('mouseout', function () { onMouseOut(circle) })

    curvedArrow.on('mouseover', function () { onMouseOver(curvedArrow) })
    curvedArrow.on('mouseout', function () { onMouseOut(curvedArrow) })

    // 初始绘制层
    layer.draw();
  </script>
</body>

</html>